<template>
    <div class='card-container' v-bind:style="{width:width}">
        <div class='card-inner'>
            <div class='personTotal clearfix'>
                <div class='lf personInfo'>
                    <h3 class='name ellipsis' :title="personInfo.name">{{personInfo.name}}</h3>
                    <ul class="width-nochange">
                        <li class="ellipsis" :title="personInfo.birthdate"><i class="fa fa-birthday-cake" aria-hidden="true"></i>出生日期 : {{personInfo.birthdate.split(' ')[0]}}({{personInfo.birthdate | calculateAge}}岁)</li> 
                        <li class="ellipsis" :title="personInfo.c_leader_ident"><i class="iconfont" ></i>国&nbsp&nbsp籍 : {{personInfo.c_leader_ident}}</li>
                        <li class="ellipsis" :title="personInfo.political_sta_chn"><i class="iconfont" ></i>政治面貌 : {{personInfo.political_sta_chn}}</li>
                    </ul>
                </div>
                <div class='lf personImg'>
                    <img :src="srcImg" class='cardPhoto' alt="">
                </div>
            </div>
            <div class="btnArea">          
                <a class="btn btn-leaderInfo" v-if="hideLeader1" target="_blank" :href="ComputedEmplid">
                    <i class="fa fa-file-pdf-o"></i> 干部任免审批表
                </a>
                <a class="btn btn-leaderSalary" @click="salaryDetail" v-if="hidePay1" data-replace-inner="#modal1" data-spin="true" data-modal="#modal1">
                    <i class="fa fa-jpy"></i> 薪酬信息
                </a>                            
            </div>
            <el-dialog :title="title" size="small" :visible.sync="dialogTableVisible" :lock-scroll=false>
                <div>
                    <h3>薪酬组成</h3>
                    <el-table :data="gridData">
                        <el-table-column property="date" label="薪酬项" width="150"></el-table-column>
                        <el-table-column property="name" label="金额" width="200"></el-table-column>
                        <el-table-column property="address" label="货币"></el-table-column>
                        <el-table-column property="address" label="发薪频率"></el-table-column>
                    </el-table>
                </div>
                <div class="salaryRecord">
                    <h3>近半年发薪记录</h3>
                    <el-table :data="gridData1" fit='true'>
                        <el-table-column property="date" label="发薪期间" width="80"></el-table-column>
                        <el-table-column property="name" label="发薪类型" width="80"></el-table-column>
                        <el-table-column property="address" label="收入合计	" width="80"></el-table-column>
                        <el-table-column property="address" label="扣减合计" width="80"></el-table-column>
                        <el-table-column property="address" label="实发工资"></el-table-column>
                        <el-table-column property="address" label="公司承担社保/MPF"></el-table-column>
                        <el-table-column property="address" label="人工成本合计"></el-table-column>
                        <el-table-column property="address" label="货币代码"></el-table-column> 
                    </el-table>
                </div>

            </el-dialog>
        </div>
        
    </div>
</template>
<script>
    import Vue from 'vue'
    import {Table,TableColumn,Dialog} from 'element-ui'
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(Dialog)
    export default {
        data(){
            return{
                // wid:'33.333%'
                red:'me',
                dialogTableVisible:false,
                gridData: [{
                    date: '基本工资（香港）',
                    name: '10000',
                    address: 'HKD',
                    often:'每月'
                    }],
                gridData1:[],
                title:"魏平勇-薪酬信息"
          
            }
        },
        components:{

        },
        methods:{
            salaryDetail:function(){
                this.dialogTableVisible = true;
            }
        },
        computed:{
            srcImg : function(){
                var ImgObj = new Image(); //判断图片是否存在  
                ImgObj.src = "http://10.5.0.137:8080/img/"+this.personInfo.emplid+".png";  
                //没有图片，则返回-1  
                if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {  
                    return "http://10.5.0.137:8080/img/"+this.personInfo.emplid+".png";  
                } else {  
                    return '/static/images/default1.jpg';
                }  
                
            },
			ComputedEmplid : function(){
                return 'module/leaderAppoint.html?emplid=' + this.personInfo.emplid 
			},
            hideLeader1:function(){
                console.log(this.hideLeader,'hideLeader');
                 return  this.hideLeader ? true : false; 
            },
            hidePay1:function(){
                return  this.hidePay ? true : false;
            }
		},
        filters:{
            calculateAge:function(value){

                return new Date().getFullYear() - new Date(value).getFullYear();
            }
        },
        props:{
            width:{
                type:String,
                default:'33.333%'
            },
            personInfo:{
                type:Object,
                default:''
            },
            hideLeader:{
                type:Number,
                default:0
            },
            hidePay:{
                type:Number,
                default:0              
            }
        },
        watch:{
            widt:function(){
                console.log('watch',this.widt);
                console.log(this.red,'tell me color');
            }
        }
    }
</script>
<style scoped>
    .card-container{
        position: relative;
        min-height: 1px;
        float: left;
        color: #333;
        background-color: #fff;
        padding-right: 10px;
        padding-left: 10px;
    }
    .card-inner{
        width:100%;
        margin: 10px auto;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    }

/*个人信息区域样式 start*/
    .card-container .personTotal{
        cursor: pointer;
        margin-bottom: 20px;

    }
    .card-container .personInfo{
        float: left;
        width:69%;
        padding-left:4%;
    }
    .iconfont{
        width:20px;
        display: inline-block;
    }
    .card-container .name{
        font-size: 24px;
        margin-top: 30px;
        margin-bottom: 10px;
        font-weight: 500;
        line-height: 1.1;
    }
    .card-container .width-nochange{
        /*max-width: 237px;*/
        min-width: 223px;
    }
    
    .card-container li{
        line-height: 25px;
        color: #333;
    }
    .card-container li .fa{
        width:20px;
    }
    .card-container .personImg{
        float: left;
        width:31%;
        padding-left:5px;
        padding-top: 25px;
    }
    .card-container .cardPhoto{
        /*margin-left:5px;*/
        width: 100px;
        height: 139px;
        border-radius: 50%;
        max-width: 100%;
        vertical-align: middle;
    }
/*个人信息区域样式 end*/

/*按钮区域样式 start*/
    .card-container .btnArea{
        background: #F2F5F7;
        padding: 12px 0;
        border-top: 1px solid #E6E9ED;
        text-align: center;
        height:44px;
    }
    .card-container .btn {
        border-radius: 3px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid transparent;
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.5;
    }
    .card-container .btnArea .btn-leaderInfo{
        color: #fff; 
        background-color: #3c8dbc;
        border-color: #204d74;
    }
    .card-container .btnArea .btn-leaderInfo:hover{
        background-color: #367fa9;
    }
    .card-container .btnArea .btn-leaderSalary{
        color: #fff; 
        margin-left:8px;
        background-color: #00c0ef;
        border-color: #00acd6;
    }
    .card-container .btnArea .btn-leaderSalary:hover{
        background-color: #00acd6;
    }
/*按钮区域样式 end*/
</style>
<style>
   .card-container .el-dialog--small {
        width: 66%;
    }
    .card-container .el-table .gutter {
        display: none;
    }
    .card-container .salaryRecord{
        margin-top:20px;
    }
    
</style>



